<script>
  // store and query initialization
  import { operationStore, query } from "@urql/svelte"
  import { initClient } from "@urql/svelte"
  initClient({
    url: "https://throbbing-field-190014.us-west-2.aws.cloud.dgraph.io/graphql",
  })
  export const books = operationStore(
    `{
    queryBook {
      id
      name
      genre
      author {
        name
      }
    }
    }
    `
  )
  query(books)
</script>

<div class="card-body">
  {#if $books.fetching}
    <h2>Loading...</h2>
  {:else if $books.error}
    <h2>Oh NO Vallin!</h2>
  {:else if !$books.data}
    <h2>No books</h2>
  {:else}
    {#each $books.data.queryBook as book}
      <div class="">
        <div class="card-title">Name - {book.name}</div>
        <div>Author - {book.author.name}</div>
      </div>
    {/each}
  {/if}
</div>
